<template>
<div class="wh-100 d-flex">
    <div  :class="showRight ? 'w-80' : 'w-100'" class="h-100 card" style="background-color: white">
        <div class="mt-8 mb-8  d-flex-between-center" >
            <div  class=" h-100 d-flex-align-center">
                <Button  @click="getDataList" >刷新</Button>
                <Button  @click="deleteSelect">批量删除</Button>
                <Button type="dashed" @click="openTip=!openTip">{{ openTip ? "关闭提示" : "开启提示" }}</Button>
              <Button  @click="dropExportSelect">导出所选数据</Button>
              <Button  @click="dropExportAll" >导出全部数据</Button>
              <Button  @click="dropExportSearch" class="mr-auto">下载当前查询数据</Button>
            </div>
            <Button class="mr-8" :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"
                    @click.native="showRight =!showRight"
                    type="primary">
            </Button>
        </div>
        <div v-show="openTip">
            <Alert show-icon>
                已选择 <span class="select-count">{{ selectList.length }}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
        </div>
        <div v-ref-height="refHeight" class="h-80 w-100">
            <Table :loading="loading" border :columns="tableColumns" :data="tableData" ref="table" sortable="custom"
                   :height="refHeight.value"
                   @on-selection-change="changeSelect"
            >
                <template slot-scope="{row}" slot="action">
                    <div class="wh-100 d-flex-around-center fs-14" style="color: rgb(40, 115, 243)">
                        <div class="mr-8 cursor-pointer" @click="reviewViewDetail(row)">详情</div>
                        <div class="mr-8 cursor-pointer" @click="reviewHistory(row)">历史</div>
                    </div>
                </template>
                <template slot-scope="{row}" slot="result">
                    <div v-if="row.result == 0" style="color:rgb(255, 154, 3)">学校驳回 </div>
                    <div v-if="row.result == 1" style="color:rgb( 6, 206, 64)">学校通过 </div>
                    <div v-if="row.result == 2" style="color:rgb(255, 154, 3)">学院驳回 </div>
                    <div v-if="row.result == 3" style="color:rgb( 6, 206, 64)">学院通过，学校通过</div>
                    <div v-if="row.result == 4" style="color:rgb(255, 154, 3)">学院通过，学校驳回</div>
                    <div v-if="row.result == 5">学生撤回</div>
                    <div v-if="row.result == 6" style="color:rgb(22, 119, 255)">学院通过，学校待审核</div>
                </template>
            </Table>
        </div>
        <div  class="w-100 h-10 d-flex-around-center pt-8">
            <Page :current="searchForm.pageNumber"
                  :total="searchForm.total"
                  :page-size="searchForm.pageSize"
                  @on-change="changePage"
                  @on-page-size-change="changePageSize"
                  :page-size-opts="[10,20,50,100,200]"
                  size="small" show-total
                  show-elevator
                  show-sizer>
            </Page>
        </div>
    </div>
    <div v-show="showRight"   class="w_20-12 rightStyle h-100  ml-12 card" >
         <div v-if="isSearch" class="wh-100 pl-8 pr-8">
             <div  class=" pt-12 fs-16  fw-6 ">
                 查询区
             </div>
             <div class="">
                 <Form ref="searchForm" :model="searchForm"  :label-width="labelWidth130" class="pl-12 pr-12 pt-32 w-100">
                     <FormItem class="w-100" label="姓名" prop="xm" >
                         <Input class="w-100" type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                     </FormItem>
                     <FormItem class="w-100 " label="考生号" prop="ksh" >
                         <Input class="w-100" type="text" v-model="searchForm.ksh" placeholder="请输入考生号" clearable />
                     </FormItem>
                     <FormItem class="w-100" label="学号" prop="xh" >
                         <Input class="w-100" type="text" v-model="searchForm.xh" placeholder="请输入学号" clearable />
                     </FormItem>
                     <FormItem class="w-100" label="身份证号" prop="sfzh" >
                         <Input class="w-100" type="text" v-model="searchForm.idCard" placeholder="请输入身份证号" clearable />
                     </FormItem>
                     <FormItem class="w-100" label="专业" prop="zy">
                         <Input class="w-100" type="text" v-model="searchForm.zy" placeholder="请输入专业名称" clearable/>
                     </FormItem>
                     <FormItem class="w-100" label="院系" prop="yxmc">
                         <Input class="w-100"  type="text" v-model="searchForm.yxmc" placeholder="请输入院系名称" clearable/>
                     </FormItem>
                     <FormItem label="学历" prop="college" class=" w-100">
                         <Select   v-model="searchForm.xlcc" clearable placeholder="请选择学历" class="w-100">
                             <Option v-for="(item,index) in xlList" :value="item.value" :key="index">{{ item.title }}</Option>
                         </Select>
                     </FormItem>
                     <FormItem class="w-100" label="户口迁转类型" prop="transferType" >
                         <Select  clearable v-model="searchForm.houseTransferTypeCode" placeholder="请选择户口迁转类型" class="w-100">
                             <Option v-for="(item,index) in accountTypeList" :value="item.value" :key="index">{{ item.title }}</Option>
                         </Select>
                     </FormItem>
                     <FormItem class="w-100" label="审核结果" prop="result" >
                         <Select clearable v-model="searchForm.result"  placeholder="请选择审核结果" class="w-100">
                             <Option value="0">学校驳回</Option>
                             <Option value="1">学校通过</Option>
                             <Option value="2">学院驳回</Option>
                             <Option value="3">学院通过，学校通过</Option>
                             <Option value="4">学院通过，学校驳回</Option>
                             <!--                                    <Option value="5">学生撤回</Option>-->
                             <Option value="6">学院通过，学校待审核</Option>
                         </Select>
                     </FormItem>
                     <FormItem label="审核起始时间" style="width: 100%">
                         <DatePicker
                             element-id="selectDate"
                             v-model="selectStartTime"
                             type="datetime"
                             class="w-100"
                             clearable
                             @on-change="selectStartDate"
                             placeholder="选择起始时间"
                         ></DatePicker>

                     </FormItem>
                     <FormItem label="审核截止时间" style="width: 100%">

                         <DatePicker
                             element-id="selectDate"
                             v-model="selectEndTime"

                             type="datetime"
                             class="w-100"
                             clearable
                             @on-change="selectEndDate"
                             placeholder="选择截止时间"
                         ></DatePicker>
                     </FormItem>
                     <FormItem class="br box-key">
                         <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                         <Button @click="handleReset">重置</Button>
                     </FormItem>
                 </Form>
             </div>
         </div>
    </div>
</div>
</template>
<script>
import util from '@/libs/util';
import {
    accountTransferRecordDeleteByIdsApi,
    archiveTransferInfoDoneListApi,
    exportAllAccountTransferRecord,
    exportSearchAccountTransferRecord,
    exportSelectAccountTransferRecord
} from '../../api/accountManagement/accountManagementApis';
import { newProvincialDataApi } from '../../api/bys';
import { getDictDataByType } from '../../api';
import { archiveTransferDoneDeleteByIdsByIds } from '../../api/archivesManagement/archiveForwardingAddressApis';
import { areaDataApi } from '../../api/common';

export default {
    name: 'accountIVeDoneIt',
    data() {
        return {
            labelWidth130: 80,
            refHeight:{value:0},
            selectStartTime: null,
            selectEndTime: null,
            openTip: true, // 显示提示
            showRight: true,
            loading: false,
            isSearch: true,
            selectList: [], // 多选数据
            tableData:  [], // 表格数据
            tableColumns:[],
            tableColumns_1: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    type: "index",
                    title: "序号",
                    width: 60,
                    align: "center"
                },
                {
                    title: "院校名称",
                    key: "gxmc",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "院系名称",
                    key: "yxmc",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "专业",
                    key: "zy",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "姓名",
                    key: "name",
                    minWidth: 100,
                    sortable: false,
                },
                {
                    title: "学历",
                    key: "xlcc",
                    minWidth: 100,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.xlList.find(item => item.value === params.row.xlcc).title);
                    }
                },
                {
                    title: "身份证号",
                    key: "idCard",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "考生号",
                    key: "ksh",
                    minWidth: 150,
                    sortable: false,
                },
                {
                    title: "学号",
                    key: "xh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    // title: "户口迁转类型代码",
                    title: '户口迁转类型',
                    key: 'houseTransferTypeCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.accountTypeList.find(item => item.value == params.row.houseTransferTypeCode).title);
                    }
                },
                {
                    title: '户口迁转地址',
                    key: 'houseTransferAddr',
                    minWidth: 120,
                    sortable: false
                },
                {
                    // title: "户口迁转所在地代码",
                    title: '户口迁转所在地',
                    key: 'houseTransferLocationCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                      return h('span',  this.getCity(params.row.houseTransferLocationCode));
                    }
                },
                {
                    title: '审核节点',
                    key: 'node',
                    minWidth: 120
                },
                {
                    title: '审核意见',
                    key: 'comment',
                    align: 'center',
                    minWidth: 130
                },
                {
                    title: '耗时',
                    key: 'duration',
                    align: 'center',
                    width: 100,
                    sortable: true,
                    render: (h, params) => {
                        return h('div', util.millsToTime(params.row.duration));
                    }
                },
                {
                    title: "申请时间",
                    key: "startTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "审核时间",
                    key: "endTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "审核结果",
                    slot: "result",
                    minWidth: 180,
                    sortable: false,
                    fixed: "right",
                },
                {
                    title: "操作",
                    slot: "action",
                    align: "center",
                    minWidth: 120,
                    fixed: "right",
                }
            ],
            searchForm: { // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                total:0,
            },
            locationOfTheUnitList: [], // 单位所在地列表
            accountTypeList: [], // 户口迁转类型列表
            xlList: [], // 学历列表
            areaList: [],
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
    async mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.newObtainTheCascadingDataOfProvincesAndCities();
        this.obtainTheAccountMigrationType();
        await this.getxlList();
        await this.getareaData();
        this.getDataList();
    },
    methods: {
        onRestWindow() {
            this.tableColumns = this.restTableCellWidth(this.tableColumns_1)
            this.labelWidth130 = this.searchLabelWidth(this.labelWidth130)
        },
      getCity(e ){
          let code =e.split(',')[2],city = ''
          this.areaList.map(item=>{
            item.children.map(e=>{
              e.children.map(_e=>{
                if (_e.code==code){
                  city = _e.fullName
                }
              })
            })
          })
        return city
      },
        async getareaData() {
            let res = await areaDataApi()
            if(res.code === 200){
                this.areaList = res.result
                console.log("this.areaList",this.areaList)
            }
        },
        selectStartDate(data){
            this.searchForm.startTime = data;
            // this.searchForm.endTime = data[1];
            console.log(data)
        },
        selectEndDate(data){
            // this.searchForm.startTime = data[0];
            this.searchForm.endTime = data;
            console.log(data)
        },
        newObtainTheCascadingDataOfProvincesAndCities(){
            newProvincialDataApi().then((res) =>{
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList",this.locationOfTheUnitList)
            })
        },
        obtainTheAccountMigrationType(){
            getDictDataByType('household-transfer-type').then(res => {
                if(res.code === 200){
                    this.accountTypeList=res.result
                }
            });
        },
        async getxlList() {
            let res= await getDictDataByType('eduLevelType')
            if (res.code === 200) {
                this.xlList = res.result
            }
        },
        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            // 重新加载数据
            this.getDataList();
        },
        reviewHistory(row) {
            this.$router.push({
                name: "AccountReviewHistory",
                query: {
                    userId: row.userid,
                },
            });
        },
        reviewViewDetail(row) {
            this.$router.push({
                name: "AccountReviewInfo",
                params: {
                    row: row,
                    type: "已审核"
                },
            });
        },
        getDataList(){
            this.loading = true;
            archiveTransferInfoDoneListApi({ ...this.searchForm }).then(res => {
                console.log("res……", res);
                this.tableData = res.result.result;
                this.searchForm.total = res.result.total;
                this.loading = false;
            })
        },
        changeSelect(e) {
            this.selectList = e;
            console.log("selectList", this.selectList);
        },
      dropExportSearch(){
        this.exportingSearch = true;
        exportSearchAccountTransferRecord(this.searchForm).then(res => {
          this.exportingSearch = false;
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口审核历史信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
        console.log(ids);
      },
        deleteSelect(){
            if (this.selectList.length <= 0) {
                this.$Message.warning("您还未选择要删除的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认删除",
                render: (h) => {
                    return h('div', [
                        h('p', "您确认要删除所选的 " + this.selectList.length + " 条数据?",),
                    ]);
                },
                loading: true,
                onOk: () => {
                    let ids = [];
                    this.selectList.forEach(function(e) {
                        ids.push(e.tableId)
                    });
                    // this.deleteBtnLoading = true;
                    accountTransferRecordDeleteByIdsApi({ids: ids}).then(res => {
                        this.$Modal.remove();
                        if (res.code === 200) {
                            this.$message.success("删除成功");
                        }
                        this.clearSelectAll();
                        this.getDataList();
                        // this.deleteBtnLoading = false;
                    })
                }
            });
        },
      dropExportSelect(){
        let ids = [];
        this.selectList.forEach(function(e) {
          ids.push(e.tableId)
        });
        this.exportingSelect = true;
        exportSelectAccountTransferRecord({ids: ids}).then(res => {
          this.exportingSelect = false;
          // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);

          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口审核历史信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
        console.log(ids);
      },

      dropExportAll() {
        this.exportingAll = true;
        exportAllAccountTransferRecord().then(res => {
          this.exportingAll = false;
          // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口审核历史信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
      },


        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
    }
};
</script>




<style scoped lang="less">
//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.card{
    background: white;
    transition: box-shadow .3s ease, transform .2s ease;
}
.card:hover {
    box-shadow: 0 4px 8px #23232333;
}
.w_20-12{
    width: calc(20% - 12px);
}
.cml-35 {
    margin-left:-35px;
}


@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
        height: 94% !important;
    }
    /deep/ .ivu-table-body {
        height: 94%;
    }
}


@media (min-width: 1921px) and (max-width: 3440px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
    height: 93% !important;
    }
}

// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 94px !important;
    }
}
</style>